import { graphql } from 'gatsby';

import DocLink from '../../components/DocLink';
import Callout from '../../components/Callout';
import CodeBlock from '../../components/CodeBlock';
import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';
import NavbarBasic from '../../examples/Navbar/Basic';
import NavbarBrand from '../../examples/Navbar/Brand';
import NavbarCollapsible from '../../examples/Navbar/Collapsible';
import NavbarColorSchemes from '../../examples/Navbar/ColorSchemes';
import NavScroll from '../../examples/Navbar/NavScroll';
import NavbarOffcanvas from '../../examples/Navbar/Offcanvas';
import NavbarTextLink from '../../examples/Navbar/TextLink';
import ContainerOutside from '../../examples/Navbar/ContainerOutside';
import ContainerInside from '../../examples/Navbar/ContainerInside';

# Navbars

<p className="lead">
  A powerful, responsive navigation header, the navbar. Includes support for
  branding, navigation, and more
</p>

## Overview

Here’s what you need to know before getting started with the Navbar:

- Use the `expand` prop to allow for collapsing the `Navbar` at
  lower breakpoints.
- `Navbar`s and their contents are fluid by default. Use optional
  [containers](#containers) to limit their horizontal width.
- Use spacing and flex utilities to size and position content

A responsive navigation header, including support for branding,
navigation, and more. Here’s an example of all the sub-components
included in a responsive light-themed navbar that automatically
collapses at the lg (large) breakpoint.

<ReactPlayground codeText={NavbarBasic} />

## Brand

A simple flexible branding component. Images are supported but will
likely require custom styling to work well.

<ReactPlayground codeText={NavbarBrand} />

## Forms

## Text and Non-nav links

Loose text and links can be wrapped `Navbar.Text` in order to
correctly align it vertically.

<ReactPlayground codeText={NavbarTextLink} />

## Color schemes

Theming the navbar has never been easier thanks to the combination of
theming classes and background-color utilities. Choose from
`variant="light"` for use with light background colors, or
`variant="dark"` for dark background colors. Then, customize
with the `bg` prop or any custom css!

<ReactPlayground codeText={NavbarColorSchemes} />

## Containers

While not required, you can wrap the Navbar in a `<Container>` component
to center it on a page, or add one within to only center the contents of a
[fixed or static top navbar](#placement).

<ReactPlayground codeText={ContainerOutside} />

When the container is within your navbar, its horizontal padding is
removed at breakpoints lower than your specified
`expand={'sm' | 'md' | 'lg' | 'xl' | 'xxl'}` prop. This
ensures we’re not doubling up on padding unnecessarily on lower
viewports when your navbar is collapsed.

<ReactPlayground codeText={ContainerInside} />

## Placement

You can use Bootstrap's <DocLink path="/utilities/position/">position utilities</DocLink> to
place navbars in non-static positions. Choose from fixed to the top,
fixed to the bottom, or stickied to the top (scrolls with the page until
it reaches the top, then stays there). Fixed navbars use
`position: fixed`, meaning they’re pulled from the normal
flow of the DOM and may require custom CSS (e.g., padding-top on the
`<body>`) to prevent overlap with other elements. Also
note that `.sticky-top` uses `position: sticky`, which
[isn’t fully supported in every browser](https://caniuse.com/#feat=css-sticky).

Since these positioning needs are so common for Navbars, we've added
convenience props for them.

<h3 className="h4">Fixed top</h3>
<CodeBlock codeText={` <Navbar fixed="top" />`} />

<h3 className="h4">Fixed bottom</h3>
<CodeBlock codeText={` <Navbar fixed="bottom" />`} />

<h3 className="h4">Sticky top</h3>
<CodeBlock codeText={` <Navbar sticky="top" />`} />

## Scrolling

You can use the `navbarScroll` prop in a `<Nav>` to enable vertical scrolling within the
toggleable contents of a collapsed navbar. See the <DocLink path="/components/navbar/#scrolling">Bootstrap docs</DocLink> for more information.

<ReactPlayground codeText={NavScroll} />

## Responsive behaviors

Use the `expand` prop as well as the
`Navbar.Toggle` and `Navbar.Collapse` components
to control when content collapses behind a button.

Set the `defaultExpanded` prop to make the Navbar start
expanded. Set `collapseOnSelect` to make the Navbar collapse
automatically when the user selects an item. You can also finely control
the collapsing behavior by using the `expanded` and
`onToggle` props.

<Callout theme="warning">
  Watch out! You <strong>need</strong> to provide a breakpoint value to <code>expand</code> in
  order for the Navbar to collapse at all.
</Callout>

<ReactPlayground codeText={NavbarCollapsible} />

### Offcanvas

Transform your expanding and collapsing navbar into an offcanvas drawer
with the offcanvas component. We extend both the offcanvas default
styles and use the `expand` prop to create a dynamic and
flexible navigation sidebar.

In the example below, to create an offcanvas navbar that is always
collapsed across all breakpoints, set the `expand` prop to `false`.

<ReactPlayground codeText={NavbarOffcanvas} />

## API

<ComponentApi metadata={props.data.Navbar} />
<ComponentApi
  metadata={props.data.NavbarBrand}
  exportedBy={props.data.Navbar}
/>
<ComponentApi
  metadata={props.data.NavbarToggle}
  exportedBy={props.data.Navbar}
/>
<ComponentApi
  metadata={props.data.NavbarCollapse}
  exportedBy={props.data.Navbar}
/>

export const query = graphql`
  query NavbarQuery {
    Navbar: componentMetadata(displayName: { eq: "Navbar" }) {
      ...ComponentApi_metadata
    }
    NavbarBrand: componentMetadata(displayName: { eq: "NavbarBrand" }) {
      ...ComponentApi_metadata
    }
    NavbarToggle: componentMetadata(displayName: { eq: "NavbarToggle" }) {
      ...ComponentApi_metadata
    }
    NavbarCollapse: componentMetadata(displayName: { eq: "NavbarCollapse" }) {
      ...ComponentApi_metadata
    }
  }
`;
